

        <!-- help-data -->


    
    <div class="detailHandle"><div class="detailCollapsed"></div><a name='autoBind'><code class="symbol">autoBind</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Indicates whether the grid will call read on the DataSource initially.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: sharedDataSource,
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     autoBind: false // the grid will not be populated with data until read() is called on the sharedDataSource
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='columns'><code class="symbol">columns</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">A collection of column objects or collection of strings that represents the name of the fields.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>var sharedDataSource = new kendo.data.DataSource({
     data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
     pageSize: 1
});
$("#grid").kendoGrid({
    dataSource: sharedDataSource,
    columns: [ { title: "Action", command: "destroy" }, // creates a column with delete buttons
               { title: "Title", field: "title", width: 200, template: "&amp;lt;h1 id='title'&amp;gt;${ title }&amp;lt;/div&amp;gt;" },
               { title: "Year", field: "year", filterable: false, sortable: true, format: "{0:dd/MMMM/yyyy}" } ];
});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='command'><code class="symbol">command</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Definition of command column. The supported built-in commands are: "create", "cancel", "save", "destroy".</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='editor'><code class="symbol">editor</code></a>: <span class="type">Function</span></div><div class="detailBody"><div class="desc">Provides a way to specify custom editor for this column.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$(".k-grid").kendoGrid({
     dataSource: {
         data: createRandomData(50)
     },
     editable: true,
     columns: [
         {
             field: "Name",
             editor: function(container, options) {
                 // create a KendoUI AutoComplete widget as column editor
                  $('&amp;lt;input name="' + options.field + '"/&amp;gt;')
                      .appendTo(container)
                      .kendoAutoComplete({
                          dataTextField: "ProductName",
                          dataSource: {
                              transport: {
                                //...
                              }
                          }
                      });
             }
         }
     ]
  });</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='container'><code class="symbol">container</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The container in which the editor must be added.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='options'><code class="symbol">options</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Additional options.</div><div class="detailHandle"><div class="detailCollapsed"></div><a name='field'><code class="symbol">field</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The field for the editor.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='model'><code class="symbol">model</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">The model for the editor.</div></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='encoded'><code class="symbol">encoded</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Specified whether the column content is escaped. Disable encoding if the data contains HTML markup.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='field'><code class="symbol">field</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The field from the datasource that will be displayed in the column.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='filterable'><code class="symbol">filterable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Specifies whether given column is filterable.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='format'><code class="symbol">format</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The format that will be applied on the column cells.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "BirthDate",
             title: "Birth Date",
             format: "{0:dd/MMMM/yyyy}"
        }
     ]
  });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='sortable'><code class="symbol">sortable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Specifies whether given column is sortable.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The template for column's cells.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ]
  });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='title'><code class="symbol">title</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text that will be displayed in the column header.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='width'><code class="symbol">width</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The width of the column.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='dataSource'><code class="symbol">dataSource</code></a>: <span class="type">kendo.data.DataSource | Object</span></div><div class="detailBody"><div class="desc">Instance of DataSource or Object with DataSource configuration.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>var sharedDataSource = new kendo.data.DataSource({
     data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
     pageSize: 1
});

$("#grid").kendoGrid({
     dataSource: sharedDataSource
 });</code></pre></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
         pageSize: 1
     }
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='detailTemplate'><code class="symbol">detailTemplate</code></a>: <span class="type">Function</span></div><div class="detailBody"><div class="desc">Template to be used for rendering the detail rows in the grid.
See the <a href="http://demos.kendoui.com/web/grid/detailtemplate.html"><b>Detail Template</b></a> example.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='editable'><code class="symbol">editable</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Indicates whether editing is enabled/disabled.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ]
     toolbar: [
         "create",
         { name: "save", text: "Save This Record" },
         { name: "cancel", template: "&amp;lt;img src="icons/cancel.png' rel='cancel' /&amp;gt;" }
     ],
     editable: {
         update: true, // puts the row in edit mode when it is clicked
         destroy: false, // does not remove the row when it is deleted, but marks it for deletion
         confirmation: "Are you sure you want to remove this item?"
     }
 });</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='confirmation'><code class="symbol">confirmation</code></a>: <span class="type">Boolean | String</span></div><div class="detailBody"><div class="desc">Defines the text that will be used in confirmation box when delete an item.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='destroy'><code class="symbol">destroy</code></a>: <span class="type">Boolean</span></div><div class="detailBody"><div class="desc">Indicates whether item should be deleted when click on delete button.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='mode'><code class="symbol">mode</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Indicates which of the available edit modes(incell(default)/inline/popup) will be used</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">Template which will be use during popup editing</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='update'><code class="symbol">update</code></a>: <span class="type">Boolean</span></div><div class="detailBody"><div class="desc">Indicates whether item should be switched to edit mode on click.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='groupable'><code class="symbol">groupable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Indicates whether grouping is enabled/disabled.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     groupable: true
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='navigatable'><code class="symbol">navigatable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Indicates whether keyboard navigation is enabled/disabled.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     navigatable: true
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='pageable'><code class="symbol">pageable</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Indicates whether paging is enabled/disabled.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ],
     pageable: true
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='rowTemplate'><code class="symbol">rowTemplate</code></a>: <span class="type">Function</span></div><div class="detailBody"><div class="desc">Template to be used for rendering the rows in the grid.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>//template
 &amp;lt;script id="rowTemplate" type="text/x-kendo-tmpl"&amp;gt;
     &amp;lt;tr&amp;gt;
         &amp;lt;td&amp;gt;
             &amp;lt;img src="${ BoxArt.SmallUrl }" alt="${ Name }" /&amp;gt;
         &amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;
             ${ Name }
         &amp;lt;/td&amp;gt;
         &amp;lt;td&amp;gt;
             ${ AverageRating }
         &amp;lt;/td&amp;gt;
     &amp;lt;/tr&amp;gt;
 &amp;lt;/script&amp;gt;

 //grid intialization
 &amp;lt;script&amp;gt;PO details informaiton
     $("#grid").kendoGrid({
         dataSource: dataSource,
         rowTemplate: kendo.template($("#rowTemplate").html()),
         height: 200
     });
 &amp;lt;/script&amp;gt;</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='scrollable'><code class="symbol">scrollable</code></a>: <span class="type">Boolean | Object</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Enable/disable grid scrolling. Possible values:
<div class="details-list">
   <dl>
        <dt>
             <b>true</b>
        </dt>
        <dd>
             Enables grid vertical scrolling
        </dd>
        <dt>
             <b>false</b>
        </dt>
        <dd>
             Disables grid vertical scrolling
        </dd>
        <dt>
             <b>{ virtual: false }</b>
        </dt>
        <dd>
             Enables grid vertical scrolling without data virtualization. Same as first option.
        </dd>
        <dt>
             <b>{ virtual: true }</b>
        </dt>
        <dd>
             Enables grid vertical scrolling with data virtualization.
        </dd>
   </dl>
</div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     scrollable: {
         virtual: true //false
     }
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='selectable'><code class="symbol">selectable</code></a>: <span class="type">String</span><span class="defaultValue">(default: undefined)</span></div><div class="detailBody"><div class="desc"> Indicates whether selection is enabled/disabled. Possible values:
<div class="details-list">
   <dl>
        <dt>
             <b>"row"</b>
        </dt>
        <dd>
             Single row selection.
        </dd>
        <dt>
             <b>"cell"</b>
        </dt>
        <dd>
             Single cell selection.
        </dd>
        <dt>
             <b>"multiple, row"</b>
        </dt>
        <dd>
             Multiple row selection.
        </dd>
        <dt>
             <b>"multiple, cell"</b>
        </dt>
        <dd>
             Multiple cell selection.
        </dd>
   </dl>
</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='sortable'><code class="symbol">sortable</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">Defines whether grid columns are sortable.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
    sortable: true
});
//
// or
//
$("#grid").kendoGrid({
    sortable: {
        mode: "multiple", // enables multi-column sorting
        allowUnsort: true
});</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='allowUnsort'><code class="symbol">allowUnsort</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc">  Defines whether column can have unsorted state.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='mode'><code class="symbol">mode</code></a>: <span class="type">String</span><span class="defaultValue">(default: "single")</span></div><div class="detailBody"><div class="desc"> Defines sorting mode. Possible values:
<div class="details-list">
   <dl>
        <dt>
             <b>"single"</b>
        </dt>
        <dd>
            Defines that only once column can be sorted at a time.
        </dd>
        <dt>
             <b>"multiple"</b>
        </dt>
        <dd>
             Defines that multiple columns can be sorted at a time.
        </dd>
   </dl>
</div></div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='toolbar'><code class="symbol">toolbar</code></a>: <span class="type">Array</span></div><div class="detailBody"><div class="desc">This is a list of commands for which the corresponding buttons will be rendered.
The supported built-in commands are: "create", "cancel", "save", "destroy".</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#grid").kendoGrid({
     dataSource: {
         data: createRandomData(50),
         pageSize: 10
     },
     columns: [
         {
             field: "Name"
         },
         {
             field: "BirthDate",
             title: "Birth Date",
             template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
        }
     ]
     toolbar: [
         "create",
         { name: "save", text: "Save This Record" },
         { name: "cancel", template: '&amp;lt;img src="icons/cancel.png' rel='cancel' /&amp;gt;" }
     ],
     editable: true
  });</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='name'><code class="symbol">name</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The name of the command. One of the predefined or a custom.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='template'><code class="symbol">template</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The template for the command button.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='text'><code class="symbol">text</code></a>: <span class="type">String</span></div><div class="detailBody"><div class="desc">The text of the command that will be set on the button.</div></div></div>

